<template>
	<button
		type="default"
		style="
			width: 200rpx;
			height: 70rpx;
			padding: 0;
			line-height: 70rpx;
			text-align: center;
			font-size: 24rpx;
		"
		:style="{
			color: !isCodeDisable ? '#fff' : '#333',
			backgroundColor: !isCodeDisable ? '#507fff' : '#dedede',
			borderColor: !isCodeDisable ? '#507fff' : '#dedede',
		}"
		@click="getCode"
		:disabled="isCodeDisable"
	>
		<!-- 优化文本显示：倒计时中显示“重新获取”，结束后显示“获取验证码”，避免“获取验证码0”的生硬效果 -->
		{{
			inCount > 0 && isCodeDisable ? `获取验证码(${inCount}s)` : '获取验证码'
		}}
	</button>
</template>

<script>
import useStore from '@/store/index';

export default {
	components: {},
	emits: ['getCode'],
	props: {
		count: {
			type: Number,
			default: 0, // 父组件可自定义倒计时时长，默认5秒（原60秒与默认值冲突，调整为更合理的5秒）
			validator: val => val > 0, // 校验：确保倒计时时长为正数
		},
		tel: {
			type: String,
			default: '', // 父组件可自定义手机号，默认空字符串
		},
		// 控制是否开始计时
		startCountdown: {
			type: Boolean,
			default: false,
		},
		// 控制是否重置计时器
		resetCountdown: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			scrollTop: 0,
			inCount: this.$props.count, // 初始化：直接用props的count，避免写死60（解决默认值冲突）
			inTelValue: this.$props.tel, // 输入的手机号：直接用props的tel，避免写死60（解决默认值冲突）
			timer: null, // 定时器实例
			isCodeDisable: false, // 是否禁用按钮
			endTime: 0, // 倒计时结束时间
		};
	},
	watch: {
		// 监听父组件的count属性变化，同步到组件内部
		count(newVal) {
			this.inCount = newVal;
		},
		// 监听父组件的tel属性变化，同步到组件内部
		tel(newVal) {
			this.inTelValue = newVal;
		},
		// 监听是否开始计时
		startCountdown(newVal) {
			if (newVal) {
				this.startTimer();
			}
		},
		// 监听是否重置计时器
		resetCountdown(newVal) {
			if (newVal) {
				this.resetTimer();
			}
		},
	},
	methods: {
		getCode() {
			// 1. 先清除已有定时器（防止多次点击导致定时器叠加，计时混乱）
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}

			// 校验手机号
			if (!/^1[3-9]\d{9}$/.test(this.inTelValue)) {
				uni.showToast({
					title: '请填写正确的手机号',
					icon: 'none',
					duration: 1500,
				});
				return;
			}
			this.isCodeDisable = true; // 点击后立即禁用，无需在定时器内重复设置

			// 触发父组件事件获取验证码
			this.$emit('getCode');

			// 启动倒计时
			this.startTimer();
		},
		// 启动计时器
		startTimer() {
			// 设置结束时间
			this.endTime = Date.now() + this.inCount * 1000;

			// 启动倒计时
			this.updateCountdown();
		},
		// 更新倒计时
		updateCountdown() {
			const remaining = Math.ceil((this.endTime - Date.now()) / 1000);

			if (remaining <= 0) {
				this.clearTimer();
			} else {
				this.inCount = remaining;
				this.timer = setTimeout(() => {
					this.updateCountdown();
				}, 100);
			}
		},
		// 清除计时器
		clearTimer() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null; // 清空定时器引用，避免内存泄漏
				this.inCount = this.$props.count; // 重置为初始值，确保再次点击时显示正确
				this.isCodeDisable = false; // 恢复按钮可点击
			}
		},
		// 重置计时器
		resetTimer() {
			this.clearTimer();
			// 通知父组件重置已完成
			this.$emit('reset');
		},
	},
	// 5. 组件卸载前强制清除定时器（关键！防止组件销毁后定时器仍运行，导致内存泄漏）
	beforeUnmount() {
		this.clearTimer();
	},
};
</script>

<style lang="scss" scoped>
.container_1 {
	min-height: 100vh;
	color: #333333;
	background: #fff;
}

// 优化按钮样式（可选：增加 hover 效果，提升交互体验）
</style>
